<cdk-virtual-scroll-viewport tvsItemSize class="wrapper mat-elevation-z2" scrollWindow>

  <table mat-table [dataSource]="dataSource">

    <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef class="col-sm">No.</mat-header-cell>
      <mat-cell *matCellDef="let element" class="col-sm">{{element.id}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef class="col-500">Name</mat-header-cell>
      <mat-cell *matCellDef="let element" class="col-500">{{element.name}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="name2">
      <mat-header-cell *matHeaderCellDef class="col-500">Name2</mat-header-cell>
      <mat-cell *matCellDef="let element" class="col-500">{{element.name2}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="name3">
      <mat-header-cell *matHeaderCellDef class="col-500">Name3</mat-header-cell>
      <mat-cell *matCellDef="let element" class="col-500">{{element.name3}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="name4" [stickyEnd]="true">
      <mat-header-cell *matHeaderCellDef class="col-500">Name4</mat-header-cell>
      <mat-cell *matCellDef="let element" class="col-500">{{element.name4}}</mat-cell>
    </ng-container>
    <!-- <ng-container matColumnDef="name4" [stickyEnd]="true">
      <mat-header-cell *matHeaderCellDef class="col-500">Name4</mat-header-cell>
      <mat-cell *matCellDef="let element" class="col-500">{{element.name4}}</mat-cell>
    </ng-container> -->
  </table>

</cdk-virtual-scroll-viewport>
